<template>
  <div>
    <a-cascader @change="cascaderChange" v-model="newItem.value" allow-clear :max-tag-count="1" check-strictly :multiple="newItem.isMultiple" :options="data.optionItems" :field-names="{ value: 'id', label: 'name' }" :style="{ width: `${newItem.width}px` }" :placeholder="newItem.placeholder"> </a-cascader>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, computed, toRefs } from 'vue'
  export default defineComponent({
    props: ['data'],
    setup(props: any, { emit }) {
      const data: any = reactive({})
      const newItem: any = computed({
        set(val) {
          emit('update:data', val)
        },
        get() {
          return props.data
        },
      })

      const cascaderChange = () => {
        emit('search')
      }
      return {
        ...(toRefs(data) as any),
        cascaderChange,
        newItem,
      }
    },
  })
</script>

<style lang="less" scoped></style>
